<template>
    <div class="box">
        <el-card class="box-card">
            <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>
                <el-form-item label="分类名称" prop="name">
                    <el-input :rules="[
                        { required: true, message: '请输入菜单名称' },
                        { type: 'number', message: 'age must be a number' },
                    ]" v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="上级分类" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="无上级分类">
                        <el-option label="Zone one" value="shanghai" />
                    </el-select>
                </el-form-item>
                <el-form-item label="数量菜单" prop="name">
                    <el-input v-model="ruleForm.name1" />
                </el-form-item>
                <el-form-item label="排序" prop="name">
                    <el-input v-model="ruleForm.name2" />
                </el-form-item>
                <el-form-item label="是否显示" prop="resource">
                    <el-radio-group v-model="ruleForm.resource1">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否显示在导航栏" prop="resource" label-width="150">
                    <el-radio-group v-model="ruleForm.resource2">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- 点击上传 -->

                <el-form-item label="筛选属性" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择">
                        <el-option label="Zone one" value="shanghai" />
                    </el-select>
                    <el-button>删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">新增</el-button>
                </el-form-item>

                <el-form-item label="关键词" prop="name">
                    <el-input v-model="ruleForm.name3" />
                </el-form-item>
                <el-form-item label="分类描述" prop="name">
                    <el-input v-model="ruleForm.name4" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">
                        提交
                    </el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import * as api from "../../request/api"
import { useRoute } from 'vue-router';

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    name: '',
    name1: '',
    name2: '',
    name3: '',
    name4: '',
    sort: '',
    region: '',
    resource: '',
    // 是否显示
    resource1: '',
    resource2: '',
})
let ceshi = ref(0)
let route = useRoute()
watch(() => route.query.id,
    async (newval) => {
        let updateProduct = await api.admin.getAdminattrInfo(route.query.id)
        ruleForm.name = updateProduct.name
        ruleForm.name1 = updateProduct.productUnit
        ruleForm.name2 = updateProduct.sort
        // 导航栏是否显示
        ruleForm.resource2 = updateProduct.showStatus
        // 是否显示
        ruleForm.resource1 = updateProduct.navStatus
        // 关键字
        ruleForm.name3 = updateProduct.keywords
        //  分类描述
        ruleForm.name4 = updateProduct.description
    },
    { immediate: true }
)






</script>

<style lang="scss" scoped>
.box {
    margin: 20px;
}
</style>